<template>
  <!-- Panel -->
  <f7-page>
    <f7-list no-hairlines class="no-margin-top">
      <f7-list-item @click="routeView('/actionsheet/')" title="ActionSheet" link="#"></f7-list-item>
      <f7-list-item @click="routeView('/button/')" title="Buttons" link="#"></f7-list-item>
      <f7-list-item @click="routeView('/badge/')" title="Badge" link="#"></f7-list-item>
      <f7-list-item @click="routeView('/block/')" title="Block" link="#"></f7-list-item>
      <f7-list-item @click="routeView('/card/')" title="Card" link="#"></f7-list-item>

      <f7-list-item @click="routeView('/dialog/')" title="Dialog" link="#"></f7-list-item>
      <f7-list-item title="打开Loading(不含对话框)" link="#"></f7-list-item>
      <f7-list-item title="打开Toast" link="#"></f7-list-item>
    </f7-list>
  </f7-page>
</template>

<script>
export default {
  name: 'Panel',
  methods: {
    routeView(url) {
      this.$f7router.navigate(url);
    },
  }
}
</script>